<template>
    <div class="container fluid tile transparent">
        <form class="box" method="post" @submit.prevent="login()">
            <label class="label"for="username">{{$t('username')}}</label>
            <div class="control has-label-left">
                <input id="username" name="username" type="text" class="input" :placeholder="$t('input username')"
                       v-model="submitFormat.LoginForm.username" required="required">
                <label><i class="icon-user"></i></label>
            </div>
            <label class="label"for="password">{{$t('password')}}</label>
            <div class="control has-label-left">
                <input id="password" name="password" type="password" class="input" :class="{error: InputTips.isShowError}"
                       :placeholder="$t('input password')" v-model="submitFormat.LoginForm.password" required="required">
                <label><i class="icon-lock"></i></label>
                <p class="help-text" v-show="InputTips.isShowError">{{InputTips.message}}</p>
            </div>
            <div class="control">
                <div class="checkbox">
                    <input type="checkbox" name="isRemember">
                    <label>{{$t('is_remember')}}</label>
                </div>
            </div>
            <button type="submit" class="btn primary fluid" :class="{loading: loading}">{{$t('login')}}</button>
        </form>
    </div>
</template>

<script>
    import {login} from "./api/index";
    import {setToken} from "@/libs/auth";

    export default {
        data() {
            return {
                submitFormat: {
                    LoginForm: {
                        username: '',
                        password: '',
                    },
                },
                InputTips: {
                    isShowError: false,
                    message: '',
                },
                loading: false
            }
        },
        created() {
        },
        methods: {
            async login() {
                this.loading = true;
                let result = await login(this.submitFormat);
                if (result) {
                    this.loading = false;
                    if (result.meta.code === '000') {
                        setToken(result.data.token);
                        await this.$router.push({'path': '/'})
                    } else {
                        this.InputTips = {isShowError:true, message: result.meta.msg}
                    }
                }
            }
        }
    }
</script>
<style scoped>
    .error {
        border: 1px solid red;
    }

    .help-text {
        color: red;
    }

    .transparent {
        height: 100%;
        background-color: rgba(0, 0, 0, .05);
    }

    .box {
        position: absolute;
        left: 33.33%;
        top: 20%;
        width: 33.33%;
        /*margin: 0 auto;*/
        border: .05rem solid transparent;
        background: #fff;
        box-shadow: rgba(0, 0, 0, .05) 0 0.05rem 0.2rem, rgba(0, 0, 0, .12) 0 0.05rem 0.1rem;
    }
</style>